/* static/css/show_codes.css */

/* 统一基础样式 */
body {
    font-family: Arial, sans-serif; /* 统一字体 */
    margin: 0;
    padding: 0;
}

/* 表头 */
.header {
    width: 95%; /* 设置标题部分宽度为 95% */
    margin: 0 auto; /* 水平居中 */
    display: flex; /* 使 Header 内容能左右对齐 */
    justify-content: space-between; /* 一行中标题和按钮分开 */
    align-items: center; /* 垂直居中 */
    padding: 20px; /* 内边距 */
    background: linear-gradient(to bottom, #e3f2fd, #bbdefb); /* 从上到下的阴影过渡效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
/* 表头 */
.header-title {
    margin: 0; /* 水平居中 */
}

/* 标题 */
.title {
    margin: 0; /* 去除默认外边距 */
    font-size: 24px; /* 字体大小 */
}

/* 确保 p 标签内的文本为斜体 */
.title-p {
    /* 斜体 */
    font-style: italic;
    /* 移除默认的内外边距 */
    margin: 0;
    color: green;
}

/* 按钮 ( 复制 / 返回 ) */
button {
    margin-right: 18px;
    padding: 10px 15px; /* 按钮内边距 */
    background-color: #1976d2; /* 按钮背景色 */
    color: white; /* 按钮字体颜色 */
    border: none; /* 去掉边框 */
    border-radius: 5px; /* 圆角效果 */
    font-size: 14px; /* 字体大小 */
}

/* 按钮的鼠标悬停 */
button:hover {
    background-color: #1565c0; /* 悬停效果 */
}

/* 代码列表, 容器 */
.code-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 居中对齐子元素 */
    margin-left: auto;
    margin-right: auto;
    width: 90%; /* 设置容器宽度为页面的90%，左右各留5%的空白 */
    max-width: 1200px; /* 设置最大宽度，防止在大屏幕上过于宽泛 */
}

/* 每行的样式 */
.row {
    display: contents; /* 让.row不作为flex容器，而是其子元素直接参与父容器的布局 */
}

/* 单个项目的样式 */
.code-item {
    flex: 0 1 30%; /* 每个项目占据30%的宽度，允许弹性伸缩 */
    margin: 10px; /* 项目之间的间距 */
    box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度之内 */
    text-align: center; /* 文本居中 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ddd; /* 添加边框以区分各个项目 */
    border-radius: 8px; /* 圆角边框 */
    background-color: #f9f9f9; /* 背景颜色 */
}

/* 图标的样式 */
.code-icon {
    width: 100%;
    height: 300px;
    /**
    background-image: url('../ico/code_ico.png');
    **/
    background-size: cover;
    background-position: center; /* 让图片居中，只显示中间部分 */
    background-repeat: no-repeat; /* 防止图片重复 */
    cursor: pointer;
    margin-bottom: 10px; /* 图标与标题之间的间距 */
}

/* 标题的样式 */
.code-title {
    font-size: 1.5em; /* 增大字体 */
    font-weight: bold;
    margin-top: 5px;
    padding: 10px 20px; /* 添加内边距让其看起来更像按钮 */
    border: 2px solid transparent; /* 准备用于悬停效果的边框 */
    border-radius: 8px; /* 圆角边框 */
    background-color: #f0f0f0; /* 轻微背景颜色 */
    color: #333; /* 深色文字 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    cursor: pointer; /* 鼠标指针变为手形 */
}

/* 鼠标悬停时的样式 */
.code-item:hover .code-title {
    background-color: #e0e0e0; /* 更深一点的背景颜色 */
    border-color: #ccc; /* 显示边框 */
    transform: scale(1.05); /* 放大文本和按钮 */
}


/* code_info.html 中代码样式 :
*/
.string { color: green; }
.number { color: blue; }
.boolean { color: red; }
.null { color: magenta; }
.keyword { color: #66d9ef; font-weight: bold; }  /* 关键字 */
.string { color: #a6e22e; }  /* 字符串 */
.comment { color: #75715e; font-style: italic; }  /* 注释 */
.function { color: #fd971f; }  /* 函数名 */
.number { color: #ae81ff; }  /* 数字 */
#pythonCode {
    width: 90%;
    margin: 20px auto 0;
    background-color: #2b2b2b; /* 深色背景，更加专业 */
    color: #f8f8f2; /* 浅色字体，与背景对比度高 */
    padding: 15px; /* 增加内边距，使内容不紧贴边缘 */
    border-radius: 5px; /* 圆角边框，视觉上更柔和 */
    overflow-x: auto; /* 横向滚动条，防止长代码溢出 */
    font-family: 'Courier New', Courier, monospace; /* 等宽字体，代码更易读 */
    line-height: 1.5; /* 增加行高，代码段落间距更好 */
    white-space: pre-wrap; /* 保持换行 */
}
